Cara Gampang

Cara Mengaktifkan Akun OpenID di Blog

2012-09-30T05:30:00.000+07:00

Cara Mengaktifkan Open ID pada Blog - akun Open ID ini sangat diperlukan oleh beberapa blogger untuk memberikan komentar saat Blogwalking. Tujuannya yaitu selain lebih mudah dalam memberikan komentar ada beberapa juga yang ingin menunjukan Link langsung pada komentar dengan tujuan mendapatkan Backlink dari yang punya blog.

Oke mungkin ada sobat yang lagi nyari cara untuk mengaktifkan akun Open ID nya berikut Cara Mengaktifkan Open ID pada Blog :

1. Cara Mengetahui Akun Open ID Blog Kita
Sebelumnya kita harus menetahui dulu Akun Open ID kita , sebenernya akun Open ID ini sama dengan URL blog kita. Contoh :

http://www.caragampang.com/ atau http://aa-solah.blogspot.com/

Cara mengetahuinya yaitu tentunya kita harus masuk dulu ke akun Blogger kita pilih menu Setelan > Lainnya > terus tinggal lihat menu Open ID disana sudah dituliskan URL Open ID kita. dimana URL itu dapat kita gunakan untuk Berkomentar pada Blog berplatform Blogspot.

2.Cara MemVerifikasi Akun Open ID
Kadang ada beberapa blog, meski kita sudah mengetahui alamat Open ID kita namun URL tersebut didak dapat digunakan untuk berkomentar dan malah keluar tulisan "Your openid Credentials Could Not be Verified" . Berarti disini kita harus memverifikasi dulu akun Open ID kita bahwa Open ID itu benar-benar milik kita, caranya adalah :

Seperti biasa masuk dulu ke Blogger kita masing-masing.
Pilih menu Template > Edit HTML
kemudian cari kode <head> dan simpan kode berikut tepat setelah kode <head>

<link href='http://draft.blogger.com/openid-server.g' rel='openid.server'/>
<link href='http://aa-solah.blogspot.com' rel='openid.delegate'/>

Ganti tulisan warna merah dengan URL blog kita (URL Open ID)
Langkah terakhir tinggal Save Template
Tunggu beberapa menit, maka anda sudah dapat berkomentar dengan akun Open ID tersebut.

Mungkin hanya ini yang dapat saya paparkan jika ada yang ditanyakan silahkan berkomentar , selamat mencoba Mengaktifkan Open ID pada Blog.

Membuat Form Search aga Mirip Yahoo pada Blog

2012-09-11T14:42:00.001+07:00

Menu Pencarian adalah salah satu widget yang wajib ada pada suatu Blog/Web hal ini tentunya untuk mempermudah para pengunjung untuk mencari konten yang mereka maksud, dengan demikian para pengunjungpun bisa betah berlama-lama di blog kita, apalagi kalau konten yang kita sajikan menarik, bermanfaat, dan berbobot pula.. hehe
Langsung saja gak usah banyak cing-cong kali ini aaSolah akan berbagi CaraGampang membuat menu pencarian yang sedikit mirip dengan Yahoo , kenapa sedikit mirip.? yaa karena ini kaga mirip dengan menu Pencarian Yahoo..
Oke berikut Cara Membuat Menu pencarian aga mirip Yahoo pada Blog :

Seperti biasa kita kudu masuk ke Blog masing-masing..
Masuk ke menu Rancangan - Edit HTML
Jangan lupa centang dulu Expand Template Widget
Cari kode ]]></b:skin>
letkan kode CSS berikit di atas kode ]]></b:skin>

.searchform {background: url(http://1.bp.blogspot.com/-HLmRi4p0-pQ/UD7yRbIdGzI/AAAAAAAAAUU/shYYayjogqs/s1600/CarGam-search.png) no-repeat; width:550px;height:47px;
display: inline-block;zoom: 1; /* ie7 hack for display:inline-block */
*display: inline;border: solid 0px #ccc;padding: 0px;}
.searchform input {font: normal 12px Arial, Helvetica, sans-serif;padding:6px;}
.searchform .searchfield {background: #e5e5e5;width: 416px;outline: none;margin:5px 2px 0px 5px;;border-top:1px solid #888;border-left:1px solid #888;border-right:1px solid #ccc;border-bottom:1px solid #ccc;}
.searchform .searchbutton {background: url(http://2.bp.blogspot.com/-7FAYTh5-Sgg/UDxVDynsvDI/AAAAAAAAAPs/X6MhoYF1Yr8/s1600/bg_pencarian_cargam.jpg) no-repeat;height: 28px; width: 104px;border:none;}

Kemudian Save Template

Eit jangan kemana-mana dulu sob , masih ada langkah berikutnya..

Sekarang kita balik lagi ke menu Rancangan..
Tambahkan Gadget baru pada template
Pilih HTML/Java Script
Kemudian masukan Script berikut :

<form action=' /search' class='searchform' method='get'>
<input class='searchfield' id='q' name='q' onblur='if (this.value == "") {this.value = "";}' onfocus='if (this.value == "") {this.value = ""}' type='text' value=''/>
<input class='searchbutton' type='submit' value=''/>
</form>

Langkah Terakhir tinggal di Save

Kalo cara-cara yang saya jelaskan sobat ikuti sampai tuntas maka hasilnya seperti menu pencarian yang ada pada Blog ini.. atau gambarnya seperti ini...

Gimana Gampang kan cara bikinnya? kalo ada yang mau ditanyakan silahkan kasih komentar aja.. Selamat mencoba Menbuat Menu Pencarian yang Mirip Yahoo..

Membuat Slide Gallery Foto Otomatis pada Blogspot

2012-09-07T05:33:00.001+07:00

Kali ini saya akan sedikit berbagi CaraGampang untuk membuat Slide Otomatis berupa Gallery Foto , tutorial ini sengaja saya buat untuk memenuhi salah satu permintaan dari pengunjung CaraGampang.Com melalui FansPage.. Untuk contoh kurang lebih seperti Gallery Foto pada Sidebar Situs ini..
Gallery foto ini sudah otomatis berdasarkan Label atau kategory yang kita masukan, jadi sobat semua gak usah repot-repot masukin gambar dan ngasih judul.. Gimana ada yang berminat untuk dipasang di Blognya.?
Langsung saja simak langkah-langkah Membuat Slide Gallery Foto Otomatis pada Blogspot berikut :

Tentunya kudu masuk ke Blog masing-masing..
Masuk ke menu Rancangan/TataLetak.
Tambahkan Gadget Baru pilih HTML/Java Script.
Kemusian masukan Script Berikut.

<style>

#slides-outer {width:290px;height:200px;position:relative;margin:0 auto;background-color:#efefef;border: 5px #9a9a9a solid;-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);}

/* Menetralkan gambar */

#slides-outer img {margin:0px 0px;padding:0px 0px !important;background:transparent !important;border:none !important;outline:none !important;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}

#slides .next,

#slides .prev {opacity:1 !important;}

/* Stop di sini */

#slides {position:absolute;z-index:100;font:normal 12px Arial,Sans-Serif;}

.slides_container {width:290px;overflow:hidden;position:relative;display:none;}

.slides_container div.slide, .slides_container div.slide img {width:290px;height:200px;display:block;overflow:hidden;}

.slides_container div.slide img {height:auto !important;}

.pagination{ display:none;}

#slides .next,

#slides .prev {position:absolute;top:70px;left:0px;width:24px;height:43px;display:block;z-index:101;}

#slides .next {left:266px;}

#slides .caption {z-index:500;position:absolute;bottom:-35px;left:0;height:30px;padding:5px 10px 0 10px;background: #9a9a9a; opacity: 0.7;width:290px;font:normal 13px arial;color:#000;text-shadow:none;}

#slides .caption a {text-decoration:none;color:#000; font-size:12px; text-align: center;}

#slides .caption a:hover {text-decoration:underline;}

/* End SLIDES */

</style>

//<![CDATA[

$(function() {

$('#slides').slides({

generatePagination : true,

preload : true,

preloadImage : 'http://reader-download.googlecode.com/svn/trunk/images/slides-loader.gif',

play : 5000,

pause : 2500,

hoverPause : true,

effect : 'slide',

fadeSpeed : 350,

fadeEasing : '',

crossfade : true,

slideSpeed : 350,

slideEasing : '',

// Kustomisasi fungsi untuk menyisipkan caption

animationStart: function(current) {

$('div.caption').animate({bottom:-35}, 100);

animationComplete: function(current) {

$('div.caption').animate({bottom:0}, 200);

slidesLoaded: function() {

$('div.caption').animate({bottom:0}, 200);

}

});

//]]>

</script>

var showPostDate_g = false,

showComm_g = false,

slideOpenNewTab = false,

idMode = true,

slidebyLabels = true,

slideLabelName = "Ilmu Pertanian",

pBlank = "http://4.bp.blogspot.com/-NcHe2sSCqPE/T-BlAMKQb_I/AAAAAAAAAbQ/-3Qw0l_pv9A/s1600/no-image-caragampang.jpg",

text = "Komentar",

numposts_g = 6,

home_page = "http://aa-solah.blogspot.com/";

</script>

</a>

</a>

</div>

Langkah terakhir tinggal Save.

KETERANGAN

Jika pada template sobat sudah ada kode jquery.min.js maka kode berwarna Biru di atas tidak usah ditambahkan..
Ganti tulisan Ilmu Pertanian berwarna merah dengan label yang sobat inginkan..
Jika sobat ingin Menampilkan Artikel Terbaru pada Slide ini silahkan ganti tulisan true berwarna Merah dengan False

Mungkin hanya ini yang dapat saya jelaskan jika , ada masalah atau ada yang ingin ditanyakan silahkan untuk berkomentar di bawah..
Semoga berhasil, Selamat mencoba Membuat Slide Gallery Foto Otomatis pada Blogspot

Membuat Daftar Isi Sederhana Berdasarkan Kategori

2012-09-05T06:05:00.001+07:00

Membuat Daftar Isi Sederhana Berdasarkan Kategori
Kali ini saya akan sedikit berbagi cara membuat Daftar Isi sederhana di Blogspot, sebenarnya banyak sekali cara membuat daftar isi namun kali ini saya akan berbagi cara yang paling sederhana sehingga tidak terlalu berat ketika di pasang di BLOG. Daftar Isi sederhana ini diurutkan sesuai Label. mau tau gimana hasilnya.? Silahkan Copy kode berikut kemudian pasang pada Blog sobat, mau di postingan ataupun pada laman statis..
Untuk Demo-nya bisa dilihat disini

<script src="http://caragampangcom.googlecode.com/files/daftarisisederhana.txt"></script><br /> <script src="http://www.caragampang.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

NB :: Ganti tulisan berwarna MERAH dengan alamat blog sobat..
Selamat mencoba untuk Membuat Daftar Isi sederhana pada Blog

Modifikasi Tampilan Facebook Like Box dengan CSS

2012-07-07T10:17:00.003+07:00

Modifikasi Tampilan Facebook Like Box dengan CSS
Facebook merupakan salah satu Situs Jejaring Sosial terbesar saat ini, Tak aneh jika Facebook menyediakan beragam widget Facebook untuk Blog/Website salah satunya adalah Like Box Fans Page Facebook, meskipun Fans Page Facebook tidak mutlak di khususkan untuk Blog/Website, namun jika suatu Blog/Website memiliki FansPage Facebook dapat juga dijadikan sarana untuk promosi dan meningkatkan traffik Blog kita..
Kali ini saya akan sedikit berbagi bagaimana Modifikasi Tampilan Facebook Like Box dengan CSS karena mungkin sobat semua sudah bosan dengan tampilan Like Box Fans Page yang biasa-biasa saja. Oke langsung saja silahkan sobat lihat Demonya berikut ini :

Gimana apkah sobat tertarik dengan tampilan Tampilan Facebook Like Box yang sudah dimodifikasi ini? jika tertarik silahkan ikuti CaraGampang berikut :
Perhatikan kode berikut

<script src='http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US' type='text/javascript'/>
<script type='text/javascript'>FB.init("");</script>
<fb:fan connections='10' css='http://caragampangcom.googlecode.com/files/FB.css' header='0' height='200px' logobar='0' profile_id='175220759192447' stream='0' width='300px'/>

Silahkan pasang kode di atas sesuai kehendak sobat di Blog masing-masing..
Keterangan : silahkan di ganti kode berikut

Angka 10 : menunjukan jumlah thumbnail yang tampil..
200 dan 300 : menunjukan tinggi dan lebar
Tulisan Merah : itu kode CSS-nya jika sobat bisa mengedit silahkan di edit, jika tidak bisa, gunakan saja CSS milik saya itu.
175220759192447 : itu adalah ID Fans Page Facebook saya , silahkan diganti dengan ID Fans Page Facebook milik sobat masing-masing..

Contoh ID Fans Page facebook :

http://www.facebook.com/CaraGampangCom/175220759192447

angka yang di akhir adalah ID Fans Page Facebook..

Mungkin cukup itu saja, jika ada yang tidak dimengerti silahkan berkomentar di bawah ini, selamat mencoba Memodifikasi Tampilan Facebook Like Box dengan CSS.

Widget Berlangganan via Email Pop Out untuk Blogspot ala Wordpress

2012-03-20T03:01:00.001+07:00

Ini adalah widget baru untuk Blogger atau Blogspot, yang biasa kita liat pada pada Wordpress . Widget ini adalah widget Berbasis Jquery dengan efek popout Nice. Dengan memasang widget ini maka tampilan Berlangganan via Email menjadi lebih menarik, sehingga tidak menutup kemungkinan memperbanyak orang yang berlangganan via email, karena pengunjung dapat dengan mudah berlangganan artikel dari blog kita melalui email dengan satu kali klik saja.
Untuk membuat widget Berlangganan via Email yang mirip dengan Wordpress ini caranya sangat mudah karena kita hanya copy paste script saja.
Oke cara membuatnya adalah sebagai berikut :

Seperti biasa masuk ke akun Blogger masing-masing
Masuk ke menu Rancangan -> Edit HTML
Beri centang pada kotak "Expand Widgets Templates"
Carilah kode </head>
Kalo sudah ketemu, simpan Script dibawah ini tepat di atas kode </head>

<style type="text/css">/*<![CDATA[*/ .FollowByEmail {background-color: #464646;width: 220px;color: #fff;position: fixed;z-index: 999999;right: 10px;bottom: 0;} .followOpened {-webkit-border-radius: 2px 0 0;-moz-border-radius: 2px 0 0;border-radius: 2px 0 0;-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);} .w2bfollowButton {background: #464646;color: #CCC;font-size: 13px;line-height: 28px;padding: 0 10px;text-decoration: none;position: absolute;top: -28px;right: 0;display: block;-webkit-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-webkit-border-radius: 2px 2px 0 0;-moz-border-radius: 2px 2px 0 0;border-radius: 2px 2px 0 0;height: 28px;} .w2bfollowButton span {background: url("http://4.bp.blogspot.com/-cojt7gQfz4Q/TztYuq2TltI/AAAAAAAABcE/OTwMxjnwak8/s1600/follow-w2b.png") no-repeat scroll 0 3px transparent;padding-left: 15px;} .w2bfollowButton:hover,.followActive {color: #fff !important;} .w2bfollowButton:hover span,.followActive span {background-position: 0 -37px !important;} .followactive {background-color: #333;} .follow-by-email-inner {padding: 15px;} .FollowByEmail h2 {padding: 15px 15px 0;font-size: 18px;margin: 0 0 10px;font-weight: normal;} .follow-by-email-inner p {margin: 0 0 10px;} .follow-by-email-inner .follow-by-email-address {width: 95%;padding: 2px 4px;margin: 0 auto;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 15px;border: 1px solid #444;color: #888;display: block;clear: both;} .follow-by-email-inner form {text-align: center;} .follow-by-email-inner td{display: inline-block;width:100%;text-align:center;} .follow-by-email-inner .follow-by-email-address:focus {color: #000;border-color: #000;} .follow-by-email-inner .follow-by-email-submit {cursor: pointer;padding: 2px 20px;background: #333;background: -webkit-linear-gradient(top, #333 0%, #111 100%);background: -moz-linear-gradient(top, #333 0%, #111 100%);background: -o-linear-gradient(top, #333 0%, #111 100%);background: -ms-linear-gradient(top, #333 0%, #111 100%);background: linear-gradient(top, #333 0%, #111 100%);color: #ccc;text-shadow: 0 1px 0 #000;border: 1px solid #282828;-webkit-border-radius: 11px;-moz-border-radius: 11px;border-radius: 11px;-webkit-box-shadow: inset 0 1px 0 #444;-moz-box-shadow: inset 0 1px 0 #444;box-shadow: inset 0 1px 0 #444;text-decoration: none;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;margin: 1em 0 1em 0;} .follow-by-email-submit:hover {background: #222;background: -webkit-linear-gradient(top, #333 0%, #222 100%);background: -moz-linear-gradient(top, #333 0%, #222 100%);background: -o-linear-gradient(top, #333 0%, #222 100%);background: -ms-linear-gradient(top, #333 0%, #222 100%);background: linear-gradient(top, #333 0%, #222 100%);color: #fff;-webkit-box-shadow: inset 0 1px 0 #4f4f4f;-moz-box-shadow: inset 0 1px 0 #4f4f4f;box-shadow: inset 0 1px 0 #4f4f4f;text-decoration: none;} .follow-by-email-submit:active {background: #111;background: -webkit-linear-gradient(top, #111 0%, #222 100%);background: -moz-linear-gradient(top, #111 0%, #222 100%);background: -o-linear-gradient(top, #111 0%, #222 100%);background: -ms-linear-gradient(top, #111 0%, #222 100%);background: linear-gradient(top, #111 0%, #222 100%);color: #aaa;-webkit-box-shadow: inset 0 -1px 0 #333;-moz-box-shadow: inset 0 -1px 0 #333;box-shadow: inset 0 -1px 0 #333;text-decoration: none;} .w2bFollowFooter {text-align: center;font: normal 11px "Helvetica Neue", sans-serif;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid #3c3c3c;} .w2bFollowFooter a {color: #aaa;text-shadow: 0 1px 0 #262626;background: none;text-decoration: none;} .w2bFollowFooter a:hover {color: #fff;background: none;}/*]]>*/</style><script type="text/javascript">/*<![CDATA[*/;(function(w2b){w2b(document).ready(function(){w2b.extend(w2b.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=w2b(".FollowByEmail");followBox.prepend("<a class=\"w2bfollowButton\" href=\"#\"><span>Follow</span></a>");w2b("<p></p>",{class:"w2bFollowFooter",html:"<a href=\"http://feedburner.google.com\" target=\"_blank\">Delivered by FeedBurner</a>"}).appendTo(followBox.find(".follow-by-email-inner"));followBox.find("td:last").removeAttr("width");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);w2b(".w2bfollowButton").click(function(e){if(followBox.hasClass("followOpened")){w2b(this).removeClass("followActive");followBox.removeClass("followOpened").animate({bottom:followHeight},{duration:200,easing:"easeOutCubic"})}else{w2b(this).addClass("followActive");followBox.addClass("followOpened").animate({bottom:"0"},{duration:400,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery);/*]]>*/</script>

Langkah terakhir Simpan Template

Gimana Sobb, mudah kan cara membuatnya, selamat mencoba Membuat Widget Berlangganan via Email Pop Out untuk Blogspot ala Wordpress

Memasang Status Terbaru Twitter pada Blog

2012-03-19T09:43:00.000+07:00

Memasang Status Terbaru Twitter pada Blog

Saya rasa hampir semua Blogger memiliki Twitter, twitter ini dapat kita gunakan juga sebagai media untuk mempromosikan Blog melalui media Twitter. Maka dari itu untuk kali ini saya akan berbagi widget twitter yang dapat ditampilkan pada blog kita, tepatnya yaitu menampilkan status terbaru twitter pada blog .

Untuk lebih jelasnya silahkan lihat gambar berikut :

Kurang lebih tampilan widgetnya seperti itu, sahabat bisa memasang widget ini di area sidebar blog sobat, atau di tempat lain yang sobat inginkan.. Untuk sahabat yang berminat dengan widget yang satu ini silahkan simak langkah langkahnya sebagai berikut :

Seperti Biasa masuk dulu ke akun Blogger masing masing.
Nasuk ke menu Rancangan >> Tambah Gadget
Pilih HTML/Java Script (Beri judul sesuai keinginan)
Kemudian Paste kode berikut :

<style type="text/css">ul#twitter_update_list{list-style:none;margin:20px
0;background:none;}ul#twitter_update_list li{list-style:none;background:url
(http://3.bp.blogspot.com/-
EOVUNHdEphQ/ThL4DoMu7sI/AAAAAAAABDo/_7SaXVPFzPo/s26/w2b_twit_bullet.png) no-
repeat scroll left 6px transparent;padding:2px 0 2px 30px;margin:0 0
5px;display:block;}ul#twitter_update_list li a
{display:inline;background:none;}.tfoot{position:relative;background:url
(http://4.bp.blogspot.com/-
SPrPCoDdEDk/ThMAJKJl1aI/AAAAAAAABDs/LrzS00Ve49g/s1600/mttwitterbird.png) no-
repeat scroll left 6px transparent;padding:15px 0 15px 50px;display:block;}
</style><ul id="twitter_update_list"></ul><script type="text/javascript"
src="http://twitter.com/javascripts/blogger.js"></script><script
type="text/javascript"
src="http://twitter.com/statuses/user_timeline/aa_solah.json?
callback=twitterCallback2&count=5"></script><div class="tfoot"
style="clear:both;">Follow me <a href="http://twitter.com/aa_solah"
target="_blank">@aa_solah</a><a style="position:absolute;line-
height:0;right:0;" href="http://www.way2blogging.org/2011/07/awesome-latest-
tweets-twitter-widget.html" target="_blank" title="Get This Widget on
Way2Blogging!"><img src="http://img1.blogblog.com/img/blank.gif"
style="width:4px;height:4pxdorder:0 none;padding:0;margin:0;" /></a></div>

Keterangan : silahkan tulisan aa_solah berwarna merah diganti dengan ID Twitter sobat. selamat mencoba Memasang Widget Status Terbaru Twitter pada Blog

Membuat Tombol Berbagi Social Network Melayang

2012-03-19T00:22:00.002+07:00

Membuat Tombol Berbagi Social Network Melayang

Sebelumnya kita pernah membuat Cara membuat Tombol Share atau Share Button Blogger di bawah postingan kali ini kita akan belajar Membuat Tombol Berbagi Social Network Melayang di samping blog . Menurut saya tombol sher Social Network ini adalah salah satu widget penting untuk blog kita, karena jika kita memasang tombol sher maka kita atau pengunjung dapat dengan mudah membagikan artikel di blog kita ke media Social, dengan begitu ini adalah salah satu cara untuk memperbanyak pengunjung blog kita.

Di Tombol Berbagi Social Network Melayang telah disediakan, Tombol Google Plus, Tombol Sher Facebook, Tombol Twitter dan tombol Social media lainnya. dan untuk contoh silahkan sobat lihat gambar di atas atau lihat LIVE DEMO disini..

Untuk menambahkan widget yang satu ini sangat gampang kok, karena tanpa edit template terlebih dahulu. Oke untuk sobat yang pengen silahkan simak Cara Membuat Tombol Berbagi Social Network Melayang.

Seperti Biasa masuk dulu ke akun Blogger masing masing.
Nasuk ke menu Rancangan >> Tambah Gadget
Pilih HTML/Java Script (gak dikasih judul juga gak apa-apa)
Kemudian Paste kode berikut :

<style type="text/css"> #pageshare {position:fixed; bottom:25%; margin-left:-790px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#ffffff;padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style> <div id='pageshare' title="Share to Your Friends"> <div style="clear: both;font-size: 16px;text-align:center;"> </div> <div class='sbutton' id='gplusone'> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g:plusone size="tall"></g:plusone> </div> <div class='sbutton' id='fb'> <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </div> <div class='sbutton' id='rt'> <script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script> </div> <div class='sbutton' id='rw'> <div class="addthis_toolbox addthis_default_style "> <a class="addthis_counter"></a> </div> <script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4d764bd843e747be"></script> <a href=" http://www.caragampang.com/2012/03/membuat-tombol-berbagi-social-network.html "/>Get this</a> </div></div>

NB : Untuk mengatur letak, silahkan ganti angka 790 berwarna merah untuk mengatur letaknya, semakin besar angkanya makin menjorok ke kiri, dan semakin kecil angkanya semakin menjorok ke kanan..
Gimana sobat mudahkan membuatnya. Sekarang anda dapat memperaktekan Cara Membuat Tombol Berbagi Social Network Melayang

Merubah Cursor menjadi Menarik - Fancy Cursor

2012-03-18T22:01:00.000+07:00

Membuat Cursor menjadi Menarik - Fancy Cursor
Hay sahabat yang baik hati, Sebelumnya kita pernah belajar Merubah Kursor pada Blogspot kali ini kita juga akan Belajar untuk merubah cursor blog namun yang ini sering disebut Fancy Cursor , daripada saya bingung menjelaskannya mending sobat lihat langsung Demonya kurang lebih seperti ini. Silahkan arahkan kursor sobat ke tulisan berikut :

Hand

Crosshair

Text

Help

Move

Wait

Gimana sob, terlihatkan perbedaannya , kalo sobat ingin merubah cursor menjadi Fancy Cursor silahkan sobat copy paste script berikut pada postingan blog sobat (Edit HTML)

<span style="cursor :hand">masukan kalimat</span>

Keterangan : Silahkan sobat ganti tulisan warna biru dengan tulisan contoh di atas (Hand, Crosshair, Text, Wait, Move, Help). Kemudian ganti tulisan merah dengan kata kata yang yang sobat akan beri efek Fancy Cursor .

Membuat Widget Pengganti Warna Background Blog

2012-03-13T11:53:00.000+07:00

Membuat Widget Pengganti Warna Background Blog
Widget yang ini hampir sama dengan Membuat Widget Ganti Font pada Blogspot sama sama mengganti secara otomatis, namun sekarang yang berganti secara otomatis yaitu Background Blog. Jadi kalo kita memasang widget yang satu ini maka hanya dengan sekali pencet tombol pada widget ini, maka backgroun blog kita dapat berubah secara otomatis, tanpa harus mengedit template dulu.
oke untuk yang berminat silahkan simak cara Membuat Widget Pengganti Warna Background Blog

Seperti biasa masuk kea kun Blogger masing-masing .
Klik Rancangan >> Elemen Laman >> Tambah Gadget.
Pilih HTML/JavaScript.
Masukan kode berikut kemudian Save.

<script type="text/javascript"> function bgChange(bg) { document.body.style.background=bg; } </script><br /> <table border="1" width="300" height="300"><tr> <td onclick="bgChange('')" bgcolor="white"><br /> <td onclick="bgChange('#0000ff')" bgcolor="#0000ff"><br /> <td onclick="bgChange('#000000')" bgcolor="#000000"><br /> <td onclick="bgChange('#a52a2a')" bgcolor="#a52a2a"><br /> <td onclick="bgChange('#5f9ea0')" bgcolor="#5f9ea0"><br /> <td onclick="bgChange('#d2691e')" bgcolor="#d2691e"><br /> <td onclick="bgChange('#6495ed')" bgcolor="#6495ed"><br /> <td onclick="bgChange('#dc143c')" bgcolor="#dc143c"><br /> <td onclick="bgChange('#00ffff')" bgcolor="#00ffff"><br /> <br /> <td onclick="bgChange('#00008b')" bgcolor="#00008b"><br /> <td onclick="bgChange('#b8860b')" bgcolor="#b8860b"><br /> </td onclick="bgchange('#b8860b')"></td onclick="bgchange('#00008b')"></td onclick="bgchange('#00ffff')"></td onclick="bgchange('#dc143c')"></td onclick="bgchange('#6495ed')"></td onclick="bgchange('#d2691e')"></td onclick="bgchange('#5f9ea0')"></td onclick="bgchange('#a52a2a')"></td onclick="bgchange('#000000')"></td onclick="bgchange('#0000ff')"></td onclick="bgchange('')"></tr> </table>

Selamat mencoba Membuat Widget Pengganti Warna Background Blog.

Membuat Widget Ganti Font pada Blogspot

2012-03-13T07:55:00.000+07:00

Membuat Widget Ganti Font pada Blogspot

Widget yang satu ini adalah widget untuk mengganti jenis hurup pada blog kita, jadi kalo sobat memasang widget ini, maka blog sobat kurang lebih seperti Microsoft Word, Microsoft Excel, yang bisa danti-ganti jenis hurup. tidak ada salahnya kan kalo sobat mencoba dulu widget yang satu ini, sapa tau aja sobat tertarik, jika tidak tertarik gampang kan tinggal menghapus widgetnya.
oke buat sahabat yang berminat silahkan disimak cara Membuat Widget Ganti Font pada Blogspot :

Seperti biasa masuk kea kun Blogger masing-masing .
Klik Rancangan >> Elemen Laman >> Tambah Gadget.
Pilih HTML/JavaScript.
Masukan kode berikut kemudian Save.

<div class='widget-content'><center><script> function go1(){ if (document.selecter2.select2.options [document.selecter2.select2.selectedIndex].value != "none") { document.getElementById('main').style.fontSize =document.selecter2.select2.options [document.selecter2.select2.selectedIndex].value } } function go2(){ if (document.selecter2.select3.options [document.selecter2.select3.selectedIndex].value != "none") { document.getElementById('main').style.fontFamily =document.selecter2.select3.options [document.selecter2.select3.selectedIndex].value } } </script><br /> <form id="forma" name="selecter2" method="POST"><br /> <select onchange="go2()" style="font-family:verdana;font-size:8pt" name="select3" size="1"><br /> <option value="Times New Roman" />Times New Roman<br /> <option value="Arial" />Arial<br /> <option selected value="Book Antiqua" />Book Antiqua<br /> <option value="Bookman Old Style" />Bookman Old Style<br /> <option value="Century Gothic" />Century Gothic<br /> <option value="Comic Sans Ms" />Comic Sans Ms<br /> <option value="Tahoma" />Tahoma<br /> <br /> <option selected value="Trebuchet Ms"//>Trebuchet Ms<br /> <option value="Verdana" />Verdana<br /> </select><br /> <select onchange="go1()" style="font-family:verdana;font-size:8pt" name="select2" size="1"><br /> <option value="8px" />8<br /> <option value="9px" />9<br /> <option value="10px" />10<br /> <option value="11px" />11<br /> <option selected value="12px" />12<br /> <option value="14px" />14<br /> <option value="16px" />16<br /> <option value="18px" />18<br /> </select></form><center></center></center><br /> </div>

Gimana sob mudah kan, semoga berhasil.. Selamat mencoba Membuat Widget Ganti Font pada Blogspot

Membuat Teks Area disertai Tombol Select

2012-03-10T20:57:00.000+07:00

Membuat Teks Area disertai Tombol Select
Teks area yang satu ini biasanya digunakan untuk menyinpan Script banner pada Tukar Link tujuannya untuk memudahkan mengcopy script karena dengan meng-klik tombol Select maka Script/Kode langsung ter-Blok secara otomatis. Pokonya teks area dengan Tombol ini bisa duganakan untuk menyimpan apa saja Script, Teks, dan lain lain. Untuk Contohnya kurang lebih seperti ini :

Okeh, untuk sobat yang pengen Membuat Teks Area disertai Tombol Select silahkan Copy script berikut :

<form name="copy"><div align="center"><input value="Select All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/></div><p style="text-align: center;"><textarea style="padding: 3px; width:200px; height:60px;" name="txt"> MASUKAN SCRIPT, TEKS, ATAU YANG LAINNYA</textarea></p></form>

Silahkan teks yang berwarna merah diganti dengan Teks yang sobat ingin masukan kedalam area tersebut. selamat mencoba dan semoga berhasil Membuat Teks Area disertai Tombol Select .

Memberikan Efek Daun Berjatuhan pada Blog

2012-03-08T16:55:00.000+07:00

Memberikan Efek Daun Berjatuhan pada Blog
Hallo sobat Blogger, tutorial ini saya persembahkan buat sahabat yang lagi belajar ngeblog, barangkali ingin tampilan blognya lebih terlihat menarik dan keren, efek ini hampir sama dengan Efek salju berjatuhan, namun kalo ini berupa daun yang berjatuhan. pokonya sangat cocok buat mempercantik tampilan blog kita. oke yang berminat silahkan simak Cara Memberikan Efek Daun Berjatuhan pada Blog :

Seperti biasa masuk ke akun Blogger masing-masing
Masuk ke menu Rancangan -> Edit HTML
Beri centang pada kotak "Expand Widgets Templates"
Carilah kode </head>
Kalo sudah ketemu, simpan Script dibawah ini tepat di atas kode </head>

<script src='http://arti.master.irhamna.googlepages.com/daun.js'/>

Langkah terakhir simampan template

Gimana sob gampang kan Cara Memberikan Efek Daun Berjatuhan pada Blog . yaudah deh selamat mencoba semoga berhasil.. oia terimakasih sudah berkunjung ke SitusMadu - manisnya Belajar dan Berbagi.

Membuat Pesan Berjalan Di Tab Browser

2012-03-08T09:43:00.000+07:00

Membuat Pesan Berjalan Di Tab Browser
Sebenarnya ini hampir sama dengan Membuat Teks Berjalan di Menu Bar. namun kali ini kita akan mempermudah cara membuatnya tanpa mengedit template. Untuk contohnya mungkin sahabat sering melihat teks berjalan di samping icon Blog (menu bar/Tab Browser). oke untuk sahabat yang tertarik silahkan simak langkah langkah berikut :

Seperti biasa masuk kea kun Blogger masing-masing .
Klik Rancangan >> Elemen Laman >> Tambah Gadget.
Pilih HTML/JavaScript.
Masukan kode berikut kemudian Save (gak usah dikasih nama)

<script type="text/javascript">
function tb8_makeArray(n){
this.length = n;
return this.length;
}
tb8_messages = new tb8_makeArray(4);
tb8_messages[0] = "Selamat Datang Sobat";
tb8_messages[1] = "di Situsmadu";
tb8_messages[2] = "Manisnya Belajar dan Berbagi";
tb8_messages[3] = "Terima kasih kunjungannya";
tb8_rptType = 'infinite';
tb8_rptNbr = 6;
tb8_speed = 120;
tb8_delay = 2000;
var tb8_counter=1;
var tb8_currMsg=0;
var tb8_tekst ="";
var tb8_i=0;
var tb8_TID = null;
function tb8_pisi(){
tb8_tekst = tb8_tekst + tb8_messages[tb8_currMsg].substring(tb8_i, tb8_i+1);
document.title = tb8_tekst;
tb8_sp=tb8_speed;
tb8_i++;
if (tb8_i==tb8_messages[tb8_currMsg].length){
tb8_currMsg++; tb8_i=0; tb8_tekst="";tb8_sp=tb8_delay;
}
if (tb8_currMsg == tb8_messages.length){
if ((tb8_rptType == 'finite') && (tb8_counter==tb8_rptNbr)){
clearTimeout(tb8_TID);
return;
}
tb8_counter++;
tb8_currMsg = 0;
}
tb8_TID = setTimeout("tb8_pisi()", tb8_sp);
}
tb8_pisi()
</script>

Keterangan : Tulisan berwarna Biru silahkan sobat ganti dengan kata-kata yang diinginkan..
Gimana Sobat, mudah kan..? semoga berhasil Membuat Pesan Berjalan Di Tab Browser

Membuat Kotak Admin di Bawah Postingan Blog

2012-03-07T13:30:00.000+07:00

Membuat Kotak Admin di Bawah Postingan Blog
Dalam rangka memperlengkap artikel di Blog ini, kali ini saya akan berbagi Tutorial blog tepatnya yaitu Cara Membuat Kotak Admin di Bawah Postingan Blog, mungkin Tutorial ini sudah banyak berkelimangan di internet yang disebarkan oleh para Blogger, tapi tidak ada salahnya juga kan kalo saya berbagi tutorial yang satu ini. Kotak admin ini sangat bermanfaat untuk Blog kita, selain untuk mempercantik tampilan Blog kita, kotak admin ini juga katanya sih merupakan SEO untuk Blog kita. Oke deh untuk lebih jelasnya silahkan lihat gambar dibawah :

Untuk sahabat yang pengen Kotak Admin ini silahkan ikuti langkah langkah Membuat Kotak Admin di Bawah Postingan Blog :

Seperti biasa masuk ke akun Blogger masing-masing
Masuk ke menu Rancangan -> Edit HTML
Beri centang pada kotak "Expand Widgets Templates"
Carilah kode ]]></b:skin>
Kalo sudah ketemu, simpan Script dibawah ini tepat di atas kode ]]></b:skin>

.kotak-admin{display:block; width:auto; background:url(http://lh6.ggpht.com/_pt7i0nbIOCY/TKaGCrdlU1I/AAAAAAAAC2w/WRdSIMpiTiY/bgh3_thumb%5B1%5D.jpg); border:2px solid #fff;box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 3px #000;-webkit-box-shadow:0 1px 3px #000;padding:0;margin:30px 0 10px 0;font:normal 12px Arial, Sans-Serif;color:#222;}
.kotak-admin .kontainer-admin{padding:5px;}
.kotak-admin h4{background:url(http://lh6.ggpht.com/_pt7i0nbIOCY/TKaGCrdlU1I/AAAAAAAAC2w/WRdSIMpiTiY/bgh3_thumb%5B1%5D.jpg);border:none;border-bottom:1px solid #699019;color:#000;text-transform:normal;text-shadow:0 1px 0 rgba(0, 0, 0, 0.4); font:bold 12px Arial,Sans-Serif;padding:5px 10px;margin:0 0 0 0;display:block;}
.kotak-admin h4 a{color:#222;}
.kotak-admin img{width:70px;height:70px;margin:0 10px 0 0;float:left;border:1px solid #954B02;padding:2px;background:#C36702;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;}

Kemudian cari kode yang mirip dengan kode berikut <div class='post-footer'>
Kalo sudah ketemu silahkan simpan kode berikut di atas kode <div class='post-footer'>

<b:if cond='data:blog.pageType == "item"'>
<div class='kotak-admin'>
<h4>Penulis: <a expr:href='data:blog.homepageUrl'><data:post.author/></a> ~ Tutorial Blog | Tips Trick | Jejaring Sosial</h4>
<div class='kontainer-admin'>
<img src='http://4.bp.blogspot.com/-F5Oqv_IIc74/T1TsRLcXUqI/AAAAAAAAAN4/PXYShb2KjC4/s200/efek+salju+pada+blog.jpg'/>
Artikel <a expr:href='data:post.url'><data:post.title/></a> ini dipublish oleh <data:post.author/> pada hari <data:post.dateHeader/><br/>Terima kasih Anda telah membaca artikel tentang <strong><u><data:blog.pageName/></u></strong> , Anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel <strong><data:blog.pageName/></strong> ini sangat bermanfaat bagi Blog dan teman-teman anda, namun jangan lupa untuk meletakkan link <u><a expr:href='data:post.url'><data:blog.pageName/></a></u> sebagai sumbernya. Semoga artikel ini bermanfaat dan menambah wawasan kita semua. Jika anda menyukai Blog ini, silahkan like di facebook dan follow kami di twitter. Terima kasih atas kunjungan serta kesediaan Anda membaca dan berkomentar tentang artikel ini.
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://situsmadu.blogspot.com/2012/03/membuat-kotak-admin-di-bawah-postingan.html' target='_blank' title='Get this widget !'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>

Ganti tulisan berwarna Merah dengan URL foto sobat atau URL gambar yang sobat kehendaki.
langkah terakhir tinggal Save/Simpan Template

Selamat mencoba, dan semoga berhasil Membuat Kotak Admin di Bawah Postingan Blog.

Cara Membuat Tabel pada Blog

2012-03-06T12:22:00.000+07:00

Cara Membuat Tabel pada Blog

Mungkin sahabat semua pernah bertanya tanya bagaimana membuat table pada Blog, kalo membuat table di computer sih gampang kita bisa pake Ms.Excel atau membuat Ms.Word.. tapi kalo di Blog kita harus menggunakan kode HTML, caranya mudah kok tinggal ikuti langkah langkah sebagai berikut.. :

<table border="1"><tr><td></td> <td></td> </tr></table>

Keterangan:
<table> merupakan perintah untuk membuat tabel
<tr> merupakan perintah untuk membuat baris
<td> merupakan perintah untuk membuat kolom
border merupakan perintah untuk mengatur ketebalan garis pinggir. Silahkan ganti nilainya sesuai keinginan

Sebagai contoh jika anda memasukkan kode seperti ini.

<table border="1"> <tr> <td>Konten 1</td> <td>Konten 2</td> </tr> </table>

Maka hasilnya akan menjadi seperti ini:

Situs madu

AA solah

Selamat mencoba Membuat Tabel pada blog

Cara Memasang Efek salju pada Blogspot

2012-03-06T08:36:00.000+07:00

Cara Memasang Efek salju pada Blogspot

Hay sahabat yang baik hati,, mau tampilan blog anda menjadi lebih keren ? lebih cool ? dan terlihat lebih hidup.. yuk tambahkan efek salju pada Blog, caranya gampang kok.. berikut Cara Memasang Efek salju pada Blogspot :

· Seperti biasa masuk kea kun Blogger masing-masing .
· Klik Rancangan >> Elemen Laman >> Tambah Gadget.
· Pilih HTML/JavaScript.
· Masukan kode berikut kemudian Save.

<script src='http://hbhost.googlecode.com/files/snow.js' type='text/javascript'> </script>

Giman sobat, mudah kan, Semoga Blognya terlihat lebih hidup :) dengan Memasang Efek salju pada Blogspot

Menambahkan Burung Twitter pada Blog

2012-03-05T20:57:00.000+07:00

Menambahkan Burung Twitter pada Blog

Dulu saya juga pernah Menambahkan Burung Terbang Twitter pada Blog saya sebelum Blog saya pindah ke SitusMadu – Manisnya belajar dan berbagi tepatnya yaitu di Blog www.asolah.co.cc . silahkan ditengok aja, blognya masih hidup kok..hehe

Brung terbang ini fungsinya untuk menambahkan akun twitter di Blog, sekaligus mempercantik tampilan Blog kita, sapa tau aja ada yang Follow twitter kita . Buat sahabat yang mau silahkan simak langkah-langkah Menambahkan Burung Twitter pada Blog

· Seperti biasa masuk kea kun Blogger masing-masing .
· Klik Rancangan >> Elemen Laman >> Tambah Gadget.
· Pilih HTML/JavaScript.
· Masukan kode berikut kemudian Save.

<script src="http://oloblogger.googlecode.com/files/tripleflap.js" type="text/javascript"></script><script type="text/javascript">var birdSprite='http://oloblogger.googlecode.com/files/birdsprite.png';var targetElems=new Array('img','hr','table','td','div','input','textarea','button','select','ul','ol','li','h1','h2','h3','h4','p','code','object','a','b','strong','span');var twitterAccount = Http://twitter.com/aa_solah';var twitterThisText ='';tripleflapInit();</script>

Ganti tulisan aa_solah berwarna merah dengan user Twitter masing masing. Eitt janganlupa disimpan ya gadgetnya gak usah dikasih nama. Selamat mencoba dan semoga berhasil Menambahkan Burung Twitter pada Blog.

Membuat Artikel Dua kolom pada Blogspot

2012-03-05T20:28:00.000+07:00

Membuat Artikel Dua kolom pada Blogspot
Hay sahabat Blogger yang baik hati, kali ini aA akan sedikit berbagi cara membagi teks menjadi dua kolom seperti pada Koran, mungkin sudah banyak Tutorial Blog yang memberikan cara ini, namun artikel ini sebenarnya hanya untuk memperlengkap isi dari Blog ini, sekaligus update Blog lah.. Untuk sahabat yang blum tau caranya dan ingin tau silahkan simak langkah langkahnya.

Langkah pertama seperti biasa, kita harus masuk ke Blogger masing masing.
Buat postingan baru dan pilih Edit HTML
masukkan script seperti ini :

<table cellpadding="10" cellspacing="10"><tbody>
<tr> <td align="justify" valign="top" width="250">
MASUKAN ARTIKEL BAGIAN KIRI</td><td align="justify" valign="top"width="250">MASUKKAN ARTIKEL BAGIAN KANAN</td> </tr>
</tbody></table>

Keterangan:

cellpadding: atur jarak antara tepi kolom dengan tulisan
cellspacing: atur jarak antara dua kolom
width: Silahkan rubah sesuai yg di inginkan (ukuaran template anda)
align: perataan teks (justify untuk rata penuh, left untuk rata kiri, right untuk rata kanan dancenter untuk rata tengah)

Salamat mencoba.. semoga berhasil dalam Membuat Artikel Dua kolom pada Blogspot

Membuat Teks Berjalan di Menu Bar

2012-02-28T13:55:00.000+07:00

Teks Berjalan di Menu Bar, oke untuk sahabat semua yang ingin memberikan efek Teks berjalan ini cara caranya :

Seperti biasa masuk ke akun Blogger masing-masing
Masuk ke menu Rancangan -> Edit HTML
Beri centang pada kotak "Expand Widgets Templates"
Carilah kode </head>
Kalo sudah ketemu, simpan Script dibawah ini tepat dibawah kode </head>

<script language='javascript'>
message = " MASUKAN TEKS YANG AKAN DIMUNCULKAN/JUDULBLOG ^" +
"Tulis text kedua disini ^" +
"Tulis text ketiga disini ^" +
"Tulis text keempat disini ^"

scrollSpeed = 130

lineDelay = 0

// Do not change the text below //

txt = ""

function scrollText(pos) {
if (message.charAt(pos) != '^') {
txt = txt + message.charAt(pos)
status = txt
pauze = scrollSpeed
}
else {
pauze = lineDelay
txt = ""
if (pos == message.length-1) pos = -1
}
pos++
setTimeout("scrollText('"+pos+"')",pauze)
}
scrollText(0)
</script>

Langkah Terakhir Simpan Template/ Save template

Sekarang coba lihat Blog sobat, sobat sekarang telah memiliki Teks Berjalan di Menu Bar

Membuat Blogroll Dengan Marquee

2012-02-27T22:14:00.000+07:00

Membuat Blogroll Dengan Marquee
Ini adalah salah satu widge yang memberikan efek berjalan dari atas ke bawah atau sebalik dari bawah ke atas. anda dapat memasukan Banner Sahabat, Daftar Isi, Daftar Link, Counter Blog, ataupun yang lainnya. sehingga jika kita menggunakan efek Marquee maka kita dapat menghemat Tempat di Blog kita dan Blog terlihat lebih rapih.
Untuk memberi Efek Marque ini caranya gampang ko, kita hanya membutuhkan Script marque, dan Scriptnya adalah sebagai berikut :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="200" >

<a href="http://situsmadu.blogspot.com" target="_blank">Situs Madu</a>
<br/><br/>
<a href="http://asolah.co.cc" target="_blank">aa Solah</a>
<br/><br/>
<a href="http://aatemplates.blogspot.com" target="_blank">Blogger Template</a>
<br/><br/>
<a href="http://youtube.com" target="_blank">YouTube</a>
<br/><br/>
<a href="http://pusatpromosiindonesia.blogspot.com/" target="_blank">Pusat Promosi</a>
<br/><br/>

</marquee>

Keterangan :

Ganti Kode dibawah dengaqn Link Sahabat, atau Script Banner Sahabat

<a href="http://situsmadu.blogspot.com" target="_blank">Situs Madu</a>
<br/><br/>
<a href="http://asolah.co.cc" target="_blank">aa Solah</a>
<br/><br/>
<a href="http://aatemplates.blogspot.com" target="_blank">Blogger Template</a>
<br/><br/>
<a href="http://youtube.com" target="_blank">YouTube</a>
<br/><br/>
<a href="http://pusatpromosiindonesia.blogspot.com/" target="_blank">Pusat Promosi</a>
<br/><br/>

scrollamount="2" == angka "2" menunjukan kecepatan gerakan, jika ingin lebih cepat bisa diganti nilainya dengan yang lebih tinggi. Misal : scrollamount="3" ,scrollamount="4" , scrollamount="5"
direction="up" == tulisan "up" menunjukan arah gerakan keatas, bisa di rubah dengan mengganti kata "up" menjadi "down, left, right". Misal : direction="down", direction="left" , direction="right".
width="50%" == tulisan "50%" menunjukan lebar dari marquee sebesar "50%" dari tempat dimana perintah ini ditempatkan, jika ingin di rubah tinggal ganti dengan nilai yang di inginkan. contoh : width="30%" , width="70%" , width="100%"
height="200" == tulisan "200" menunjukan tinggi dari marquee sebesar 200px, jika ingin di ganti tinggal di rubah nilai angkanya. Misal : height="100" , height="300" , height="400", height="250" .

Selamat mencoba semoga berhasil Membuat Blogroll Dengan Marquee

Membuat Efek Pelangi pada Link di Blog

2012-02-27T21:27:00.000+07:00

Membuat Efek Pelangi pada Link di Blog
Pasti sobat semua sudah tidak asing lagi dengan Link berkedip kedip seperti pelangi, biasanya jika ada Link dalam suatu Blog, kemudian kita mengarahkan Pointer ke Link tersebut maka link tersebut berkedip kedip seperti pelangi (merah, kuning, hijau, dilangit yang biru).. hehe ko malah nyanyi sih.
Buat yang pengen tau caranya mari kita simak penjelasan AA sebagai berikut.. :

Seperti biasa masuk ke akun Blogger masing-masing
Masuk ke menu Rancangan -> Edit HTML
Beri centang pada kotak "Expand Widgets Templates"
Carilah kode </head>
Kalo sudah ketemu, simpan Script dibawah ini tepat dibawah kode </head>

<script src='http://sabarmuanas.googlecode.com/files/infonetmu.blogspot.com.mousepelangi.js' type='text/javascript'> </script>

Langkah terakhir tinggal Simpan Template.

Lihat hasilnya semoga Membuat Efek Pelangi pada Link di Blog berhasil.

Memasang Widget Komentar Terakhir

2012-02-27T20:50:00.000+07:00

Memasang Widget Komentar Terakhir.
Pada Widget yang satu ini sebenarnya tidak hanya menampilkan Komentar Terakhir saja melainkan pada widget ini ditampilkan juga nama orang yang berkomentar dan Artikel yang dikomentari.. Mungkin sobat semua juga sudah sering membuatnya..
oke langsung saja ini cara Memasang Widget Komentar Terakhir :

Seperti Biasa masuk dulu ke akun Blogger masing masing.
Nasuk ke menu Rancangan >> Tambah Gadget
Pilih HTML/Java Script (gak dikasih judul juga gak apa-apa)
Kemudian Paste kode berikut :

<script style="text/javascript" src=" http://amen24.googlepages.com/showrecentcomments.js
"></script><script style="text/javascript">var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script><script src="http://situsmadu.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

Langkah terakhir tinggal disimpan.

Keterangan :

http://situsmadu.blogspot.com = ganti dengan alamat Blog sobat

5 = Jumlah Komentar terakhir yang ingin ditampilokan

Selamat mencoba, dan semoga berhasil Memasang Widget Komentar Terakhir

Menambahkan Tombol Like Facebook di Atas Postingan Blog

2012-02-27T20:25:00.000+07:00

Menambahkan Tombol Like Facebook di Atas Postingan Blog.
Pada dasarnya hampir sama dengan Menambahkan Tombol Like Facebook di Bawah Postingan Blog, silahkan baca dulu supaya tau manfaat dari Tombol Like Facebook . Kalo sudah langsung saja kita Buat Tombol Like Facebook di Atas Postingan Blog :

Seperti biasa masuk ke akun Blogger masing-masing
Masuk ke menu Rancangan -> Edit HTML
Beri centang pada kotak "Expand Widgets Templates"
Carilah kode yang mirip dengan kode dibawah ini supaya gampang carinya pencet CTRL + F:

<data:post.body/>

Kalo sudah ketemu simpan kode berikut tepat dibawah kode <data:post.body/>

<iframe allowTranrparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&action=like&layout=standard&show_faces=false&width=400&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:25px;'/></div>

Langkah terakhir Simpan Template.

Silahkan lihat hasilnya pada Blog sobat, sekarang sobat sudah memiliki Tombol Like Facebook di Atas Postingan Blog.

Menambahkan Tombol Like Facebook di Bawah Postingan Blog

2012-02-27T20:05:00.000+07:00

Menambahkan Tombol Like Facebook di Bawah Postingan Blog
Hallo Sahabat Blogger, pastinya sudah tau kan Tombol Like itu seperti apa, kalo belum tau, contohnya seperti di atas Postingan di SitusMadu ini.. Pokunya tombol Like ini sangat berguna buat yang punya Blog/Website karena ini juga bisa meningkatkan peringkat Blog kita. Soalnya ketika pengunjung Like artikel kita, maka pemberitahuannya akan di publis ke Dinding Facebook secara tidak langsung Blog kita telah dipromosikan di Facebook.. ahh pokoknya banyak banget deh manfaat dari Tombol Like ini.
Yaudah deh gak usah banyak basa basi, berikut cara membuat Tombol Like di Bawah Postingan :

Seperti biasa masuk ke akun Blogger masing-masing
Masuk ke menu Rancangan -> Edit HTML
Beri centang pada kotak "Expand Widgets Templates"
Carilah kode yang mirip dengan kode dibawah ini supaya gampang carinya pencet CTRL + F:

<div class='post-footer-line post-footer-line-1'>

Kalo sudah ketemu simpan kode berikut tepat dibawah kode <div class='post-footer-line post-footer-line-1'>

<iframe allowTranrparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&action=like&layout=standard&show_faces=false&width=400&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:25px;'/>
</div>

Langkah terakhir Simpan Template.

Silahkan lihat hasilnya pada Blog sobat, sekarang sobat sudah memiliki Tombol Like Facebook di Bawah Postingan Blog.

NB : Kalo mau pasang Tombol Like Facebook di Atas Postingan Blog. baca aja disini